{% extends 'base.html' %}
{% load static %}
{% block title %}系统管理 - 菜单{% endblock %}
{% block content %}
        <!-- 内容标题栏 -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-12">
            <h1 class="m-0 text-dark">系统管理</h1>
          </div><!-- /.col -->
          <div class="col-sm-12">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">首页</a></li>
              <li class="breadcrumb-item active">系统管理</li>
                <li class="breadcrumb-item active"><a href="">菜单</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
 <!-- /内容标题栏 -->
<section class="content">
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
        <div class="card card-gray card-outline">
            <div class="card-header">
                <form id="put" class="form" enctype="multipart/form-data" action="" method="post">
                    {% csrf_token %}
                <div class="card-tools">
                    <div class="input-group input-group-sm">
                        <label class="col-form-label mr-2">菜单名</label>
                        <div class="col-2 row">
                            <input type="text" name="name" class="form-control" placeholder="菜单名">
                        </div>
                        <label class="col-form-label mr-2 ml-2">菜单名</label>
                        <div class="col-3 row">
                            <input type="text" name="icon" class="form-control" value='<i class="nav-icon fas fa-tree"></i>'>
                        </div>
                        <label class="col-form-label mr-2 ml-2">排序号</label>
                        <div class="col-2 row">
                            <input type="number" name="order_num" class="form-control" value="1000">
                        </div>
                        <div class="col-sm-2">
                            <button class="btn btn-primary">新增一级菜单</button>
                        </div>
                    </div>

                </div>
                </form>
            </div>
            <div class="card-body">
                <table id="treeTable" class="table table-hover table-bordered">
                    <thead>
                    <tr role="row" style="color: white;background-color: #6c757d;">
                        <th style="border: none;">ID</th>
                        <th style="border: none;">菜单</th>
                        <th style="border: none;">Url</th>
                        <th style="border: none;">Icon</th>
                        <th style="border: none;">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for j in data %}
                    <tr data-tt-id="{{ j.id }}" data-tt-parent-id="{{ j.pid }}" {% if j.pid == 0 %}style="background-color: #E8E8E8"{% endif %}>
                        <td style="padding: .45rem;">{{ j.id }}</td>
                        <td style="padding: .45rem;">
                            {% if j.pid == 0 %}
                                <span class="folder-open"></span>
                            {% else %}
                                <span class="folder-line"></span>
                                <span class="folder-open"></span>
                            {% endif %}
                            {{ j.name|safe }}
                        </td>
                        <td style="padding: .45rem;">{{ j.url|safe }}</td>
                        <td style="padding: .45rem;">{{ j.icon|safe }}</td>
                        <td style="padding: .45rem;">
                            <a style="color: #00b853;" href="javascript:;" onclick="edit_type({{ j.id }},'新增')">   <i class="fas fa-plus">添加子分类</i></a>
                            &nbsp;|&nbsp;
                            <a style="color: #007bff;" onclick="edit_type({{ j.id }},'修改')">  <i class="fas fa-edit"> 编辑</i></a>
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        </div>
    </div>
</div>
</section>
{% block custom_js %}
    <script>
    // treeTable
    $("#treeTable").treetable({
        "column":1,
        "expandLevel": 3
    });
    </script>
<script>
// 提交，FORM  ID
$("#put").submit(function () {
    var options = {
        success: showRespone,  //ajaxForm提交成功后，执行函数
        resetForm: false,      //执行完毕后是否重设表单
        datetype: 'json',      //数据类型
    }
    $("#put").ajaxSubmit(options);
    return false;
})

function showRespone(data) {
    if(data.status === 1){
        //操作成功
        layui.use('layer',function () {
            var layer=layui.layer;
            info = data.info
            layer.alert(info,{
                icon: 6,
                btn: '确定',
                skin: 'layer-ext-moon',
                yes: function () {
                    window.location.reload()
                },

            })
        })
    }else {
        //操作失败
        layui.use('layer',function () {
            var layer=layui.layer;
            info = data.info
            layer.alert(info,{
                icon: 5,
                skin: 'layer-ext-moon',
            })
        })
    }
}
</script>
    <script>
   //修改
   function edit_type(mid,action) {
        layui.use('layer', function () {
            var layer=layui.layer;
            layer.open({
                type: 2,   //1是静态内容层，2是iframe层，可用连接
                area: ['600px', '425px'],
                title: '编辑',
                maxmin: true,
                slideToggle: false,
                content:"/login/menu/" + mid + "/" + action,
                end: function () {
                    location.reload() //弹窗完成后，重载父页面
                }
            })
        })
   }
</script>
{% endblock %}
{% endblock %}